<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="/html/css/singlePost.css">
	<link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
	<link rel='stylesheet' href='/html/css/slider_multiple.css' />  
	<script type="text/javascript" src="/html/javascript/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="/html/javascript/votingSystem.js"></script>
	<script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-42088406-1']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>
	<link rel="shortcut icon" href="/html/resources/favicon.ico" />
	<title>Piczul</title>
</head>
<body>
	<div id="fb-root"></div>
	<script>
	  window.fbAsyncInit = function() {
	    // init the FB JS SDK
	    FB.init({
	      appId      : '288429591168346',                        // App ID from the app dashboard
	      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
	      status     : true,                                 // Check Facebook Login status
	      xfbml      : true                                  // Look for social plugins on the page
	    });
	
	    // Additional initialization code such as adding Event Listeners goes here
	  };
	
	  // Load the SDK asynchronously
	  (function(d, s, id){
	     var js, fjs = d.getElementsByTagName(s)[0];
	     if (d.getElementById(id)) {return;}
	     js = d.createElement(s); js.id = id;
	     js.src = "//connect.facebook.net/en_US/all.js";
	     fjs.parentNode.insertBefore(js, fjs);
	   }(document, 'script', 'facebook-jssdk'));
	</script>
	
	
	<div class="navbar">
		
		
		<div id="icons">
			<a href="/">
		<h1>Pic<span>zul</span></h1></a>
		
			<a href="/create"><div id="newpost">New Post</div></a>
			<!--div id="socialButons">
				<a href="https://www.facebook.com/"  target="_blank"><img class="facebook" src="/html/resources/facebook.png"></a>
				<a href="https://plus.google.com/" target="_blank"><img class="googlePlus" src="/html/resources/gplus.png"></a>
				<a href="https://twitter.com/" target="_blank"><img class="twitter" src="/html/resources/twitter.png" ></a>
			</div-->
		</div>
		</div>
	<div id="container">
	<div id="main">
	<div id="imageContent">
		<h2>${userPosts[0].title}</h2>
		
			<img id="image" src="/Image/${userPosts[0].blobId}">
			
		
			<#if userPosts[0].voteType??>
				<#if userPosts[0].voteType == true>
					<div id="votebuttons">
						<button class="vote up" id="upvote_${userPosts[0].id}" type="button" style="opacity: 0.4;" disabled><img src="/html/resources/upwhite.png" alt="" /></button>
						<p class="numvotes" id="voteTotal_${userPosts[0].id}">${userPosts[0].votes}</p>
						<button class="vote down" id="downvote_${userPosts[0].id}" type="button" ><img src="/html/resources/downwhite.png" alt="" onload="javascript:loadColour(${userPosts[0].id})"/></button><br>
						<div class="fb-like" data-href="http://www.piczul.com/post/${userPosts[0].id}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"></div>
					</div>
				<#else>
					<div id="votebuttons">
						<button class="vote up" id="upvote_${userPosts[0].id}" type="button"><img src="/html/resources/upwhite.png" alt="" /></button>
						<p class="numvotes" id="voteTotal_${userPosts[0].id}">${userPosts[0].votes}</p>
						<button class="vote down" id="downvote_${userPosts[0].id}" type="button" style="opacity: 0.4;" disabled><img src="/html/resources/downwhite.png" alt="" onload="javascript:loadColour(${userPosts[0].id})"/></button><br>
						<div class="fb-like" data-href="http://www.piczul.com/post/${userPosts[0].id}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"></div>
					</div>
				</#if>
				<#else>
					<div id="votebuttons">
						<button class="vote up" id="upvote_${userPosts[0].id}" type="button"><img src="/html/resources/upwhite.png" alt="" /></button>
						<p class="numvotes" id="voteTotal_${userPosts[0].id}">${userPosts[0].votes}</p>
						<button class="vote down" id="downvote_${userPosts[0].id}" type="button"><img src="/html/resources/downwhite.png" alt="" onload="javascript:loadColour(${userPosts[0].id})"/></button><br>
						<div class="fb-like" data-href="http://www.piczul.com/post/${userPosts[0].id}" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-font="arial"></div>
					</div>
				</#if>
		</div>
		<script type="text/javascript">
			ch_client = "ciarangeorge";
			ch_width = 523;
			ch_height = 120;
			ch_type = "mpu";
			ch_sid = "Chitika Default";
			ch_color_site_link = "0000CC";
			ch_color_title = "0000CC";
			ch_color_border = "FFFFFF";
			ch_color_text = "000000";
			ch_color_bg = "FFFFFF";
			</script>
			<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
		</script>
		<div class="fb-comments" data-href="http://www.piczul.com/post/${userPosts[0].id}" data-width="800" data-num-posts="10"></div>
	</div>
		<div class="rightNav">
		<script type="text/javascript">
			ch_client = "ciarangeorge";
			ch_width = 250;
			ch_height = 250;
			ch_type = "mpu";
			ch_sid = "Chitika Default";
			ch_color_site_link = "0000CC";
			ch_color_title = "0000CC";
			ch_color_border = "FFFFFF";
			ch_color_text = "000000";
			ch_color_bg = "FFFFFF";
			</script>
			<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
		</script>
		<div id=seperator></div>
		<div id="topPosts">
		<p><strong>View our top posts!</strong></p>
		
			<div id='my_carousel_ct' class='carousel-container'>  
		      <div id="my_carousel_1" class="carousel slide">
		        <!-- Carousel items -->
		        <div id="my_carousel_2" class="carousel-inner rs-slider">
		        <#assign x = 1>
		        <#list topPosts as topPost>
			        <#if pageNum == 1>
			          	<div class="item active">
				            <div class="ts_border">
				            	<a href="/post/${topPost.id}">
				              	<img src="/Image/${topPost.blobId}">
				              	<div class="carousel-caption">
				                	<h4>${topPost.title}</h4>
				                  	<p class="ts_txt">
				                    	<p>${topPost.title}</p>
				                  	</p>
				              	</div>
				              	</a>
				            </div>
				          </div>
				     <#else>	
						<div class="item">
				            <div class="ts_border">
				            <a href="/post/${topPost.id}">
				              <img src="/Image/${topPost.blobId}">
				              <div class="carousel-caption">
				                <h4>${topPost.title}</h4>
				                  <p class="ts_txt">
				                    <p>${topPost.title}/p>
				                  </p>
				              </div>
				              </a>
				            </div>
				          </div>
				    </#if>
			   	<#assign x = x + 1>
		        </#list>                          
		        </div>      
		        <!-- Carousel nav -->
		        <a class="carousel-custom" href="#my_carousel_1" data-slide="prev">&lsaquo;</a>
		        <a class="carousel-custom" href="#my_carousel_1" data-slide="next">&rsaquo;</a>
		      </div>	
		    </div>
				<!--<div id="advertside">
				<img src="/html/resources/mediumrectad.png" alt=""/>
				</br>
				<img src="/html/resources/mediumrectad.png" alt=""/>
				</div> -->
			</div>
			<div id=seperator></div>
			<div id="adRef">
				<a href="http://www.chitika.com/publishers/apply?refid=ciarangeorge"><img src="http://images.chitika.net/ref_banners/250x250_using_adsense.gif" /></a>
			</div>
			</div>
	</div>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-42088406-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    <script type='text/javascript' src='/html/javascript/wpts_slider_multiple.js'></script>
    <script>
      jQuery(document).ready(function(e) {
         jQuery('#my_carousel_ct').tsSlider({
           thumbs:''
          , width:'100%'
          , showText: false 
          , autoplay:3000
          , imgWidth: 100
          , imgHeight: 100
          , imgMarginTop: 0
          , imgMarginLeft: 0
          , squared: true 
          , textSquarePosition: 4 
          , textPosition: 'top'
          , imgAlignment: 'Center'
          , textColor: 'F00'
          , skin: 'transparent'
          , arrows:'ts-arrow-1'
          , sliderHeight: 200 
          , effects:'fade'
					, titleBold: 'false'
					, titleItalic: 'false'
					, textBold: 'true' 
					, textItalic: 'false' 
					, textWidth: 90
          , background_sld:'#FFF'
          , background_caption:'#000'
         });		
      });
    </script>
</body>
</html>